import React, {useState,useEffect}from 'react'

// useEffect: 处理组件的副作用（调用接口，绑定原生时间，定时器），可以实现类似生命周期的功能
// useEffect（callback ，【依赖项】）
  //1.callback在组建渲染完成之后执行，可以获取到最新的dom元素
  //2.第二个参数不传，组件内任意一个状态改变都会执行useEffect函数  类似componentDidUpdate
  //3.callback在进入组件时会先执行一次
  //4.第二个参数为空数组，只执行组件第一次渲染  后续更新不执行  类似componentDidMount
  //5.第二个参数穿的是具体的依赖项  只有当监听到依赖项发生改变时，组件才会更新 类似vue中的watch
  //6. callback中可以return一个函数
    //6.1 如果依赖项是空数组 return 的函数 在组件销毁时执行
    //6.2 如果不是空数组  在依赖项更新时会先执行上一次return的函数  然后执行本次的callback
  //7.callback 不能是async函数 因为callback 需要返回一个函数 async返回的是promise
  const Child = () => {
    const [num,setNum] = useState(0)
    // useEffect(() => {
    //   return () => {
    //     //此函数会在组件销毁时执行
    //     console.log('child销毁了')
    //   }
    // },[])

    useEffect (() => {
      // 在定时器中修改变量时无法获取到最新的数据  需要传入一个函数 通过函数的参数获取最新的数据
      const timer = setInterval(() => {
        // setNum(num + 1)
        setNum(prevNum => prevNum + 1)
        console.log(num)
      },1000)

      return () => {
        clearInterval(timer)
      }
    },[])

    return <div className='box'>
      <h2>Child组件</h2>
      <p>num:{num}</p>
    </div>
  }



const App = () => {
  const [count,setCount] = useState(0)
  const [title,setTitle] = useState('我是标题')
  const add = () => {
    // setCount(count + 1)
    setCount(prev => {
      console.log(prev)
      return prev + 1
    })

    console.log('添加函数内',count)
  }
  // console.log('添加函数外',count)

  useEffect(() => {

  })





  return (
    <div>
      <h1>{title}</h1>
      <input type="text" value={title} onChange={e => setTitle(e.target.value)}/>
      <p>
        <button onClick={() => setCount(count - 1)}>-</button>
        {count}
        <button onClick={add}>+</button>
      </p>
      {count >= 0 && <Child />}
    </div>
  )
}

export default App